<template>
  <div class="">
    <!-- 搜索框 -->
    <van-search
      shape="round"
      v-model="keyWord"
      placeholder="请输入搜索关键词"
      @search="doSearch"
      @clear="doClear"
    />

    <!-- 搜索结果 容器 -->
    <div class="search_wrap">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap" v-if="songList.length === 0">
        <!-- 每个搜索关键词  fn-function -->
        <span
          @click="clickKey(key.first)"
          v-for="(key, i) in keyList"
          :key="i"
          class="hot_item"
          >{{ key.first }}</span
        >
      </div>

      <!-- 搜索结果列表--------------------- -->
      <!-- 加载列表组件：帮助实现“列表翻页” 
           load事件： 首次显示列表组件时，会立即 执行
                      当列表触底后，也会执行
      -->
      <van-list
        v-else
        offset="50"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 列表项 -->
        <SongItem
          :id="s.id"
          :title="s.name"
          :author="s.ar[0].name"
          :album="s.al.name"
          v-for="s in songList"
          :key="s.id"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearchAPI, searchResultAPI } from "@/api/index.js";
// 导入子组件
import SongItem from "@/components/SongItem.vue";

export default {
  name: "search",
  props: {},
  data() {
    return {
      // 列表加载状态 标志位
      loading: false,
      // 列表全部数据加载完成状态 标志位
      finished: false,
      // 列表页码
      page: 1,
      // 搜过关键字
      keyWord: "",
      // 热搜关键字列表
      keyList: [],
      // 歌曲列表
      songList: [],
    };
  },
  methods: {
    // 列表的 load事件函数，触发实际：
    // a.列表首次加载 就会立即执行
    // b.列表触底，每次触底都会执行
    async onLoad() {
      // 业务：请求 下一页数据
      // a.如果 输入框内容 没有内容，说明是 首次加载，就不要请求数据
      if (this.keyWord.length === 0) {
        this.loading = false;
        return;
      }
      // b.如果输入框不为空，就断定为触底加载，我们就 请求数据
      console.log("触底啦~！");
      // c.页码+1
      this.page++;
      // d.获取 新页的 列表数据
      const res = await this.getListFn(this.keyWord);
      // e.判断依据：如果 返回的 对象中 result里没有 songs 属性，result:{songCount:0}
      //          说明 已经没有歌曲了，就要彻底关闭 list 的 触底加载功能
      if (!res.result.songs) {
        this.finished = true;
        return;
      }
      // f.将 数据 追加到 搜索列表中
      this.songList.push(...res.result.songs);
      // this.songList = [...this.songList,...res.songs]

      // g.将 loading改成false,才能 再次触发 触底加载
      this.loading = false;
    },
    // 0.根据关键字 搜索 歌曲列表，并将 结果 包装成 Promise后返回
    async getListFn(keyStr) {
      const res = await searchResultAPI(keyStr, 20, (this.page - 1) * 20);
      // console.log(res);
      // 在 async 关键字函数中，直接返回的数据，会被包装到Promise对象中返回
      return res.data;
    },
    // 1.点击 关键字 -----------------------------
    async clickKey(keyStr) {
      this.page = 1;
      this.keyWord = keyStr;
      const res = await this.getListFn(keyStr);
      this.songList = res.result.songs ?? [];
    },
    // 2.执行 搜索 -------------------------------
    async doSearch() {
      this.page = 1;
      const res = await this.getListFn(this.keyWord);
      this.songList = res.result.songs ?? [];
    },
    // 3.执行 清空 -------------------------------
    doClear() {
      this.keyWord = "";
      this.songList = [];
    },
  },
  async created() {
    const { data: res } = await hotSearchAPI();
    this.keyList = res.result.hots;
  },
  computed: {},
  watch: {},
  // 注册子组件
  components: {
    SongItem,
  },
};
</script>

<style lang="less" scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
